<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
    class="demo-ruleForm" :size="formSize" status-icon>
    <el-form-item label="ID" prop="id">
      <el-input v-model="ruleForm.id" style="height: 32px;width: 200px;" />
    </el-form-item>

    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" style="height: 32px;width: 200px;" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password" style="height: 32px;width: 200px;" />
    </el-form-item>

    <el-form-item label="昵称" prop="nickname">
      <el-input v-model="ruleForm.nickname" style="height: 32px;width: 200px;" />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm.email" style="height: 32px;width: 200px;" />
    </el-form-item>

    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="ruleForm.mobile" style="height: 32px;width: 200px;" />
    </el-form-item>

    <el-form-item label="性别" prop="gender">
      <el-select v-model="selectedGenderLabel" placeholder="请选择" style="height: 32px;width: 200px;">
        <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.label" />
      </el-select>
    </el-form-item>

    <el-form-item label="部门ID" prop="deptId">
      <el-select v-model="selectedDeptIdLabel" placeholder="请选择" style="height: 32px;width: 200px;">
        <el-option v-for="item in deptIdOptions" :key="item.value" :label="item.label" :value="item.label" />
      </el-select>
    </el-form-item>

    <el-form-item label="用户状态" prop="status">
      <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用" :active-value="1"
        :inactive-value="0" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" :disabled="props.disabled" :loading="props.loading"
        @click="props.submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="reset">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { type ComponentSize, type FormInstance, type FormRules } from 'element-plus';
import type { usersType } from '@/views/jiekoutest/domo4';

const props = defineProps<{
  formData: usersType;
  disabled: boolean;
  loading: boolean;
  submitForm: (a: any) => void;
}>();

const ruleFormRef = ref<FormInstance>();
const formSize = ref<ComponentSize>('default');
const ruleForm = ref<usersType>(props.formData);

let resetFormData: usersType = {
  username: "",
  nickname: "",
  email: "",
  gender: 1,
  password: "",
  mobile: "",
  id: 1,
  avatar: "http://dummyimage.com/100x100",
  status: 1,
  deptId: 1,
  roleIds: [1]
};

const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const mobileRegex = /^(?:(?:\+|00)86)?1\d{10}$/;

const rules = reactive<FormRules<usersType>>({
  username: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  email: [{ required: true, message: '不可以为空', trigger: 'blur' },
  { pattern: emailRegex, message: '请输入正确的邮箱地址', trigger: 'blur' }],
  gender: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  password: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '不可以为空', trigger: 'blur' },
  { pattern: mobileRegex, message: '请输入正确的手机号', trigger: 'blur' }],
  id: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  deptId: [{ required: true, message: '不可以为空', trigger: 'blur' }],
});

const genderOptions = [
  { label: '男', value: 0 },
  { label: '女', value: 1 }
];
const deptIdOptions = [
  { label: '有来技术', value: 1 },
  { label: '部门2', value: 2 }
];

const selectedGenderLabel = ref('');
const selectedDeptIdLabel = ref('');

watch(selectedGenderLabel, (newValue) => {
  const option = genderOptions.find(option => option.label === newValue);
  ruleForm.value.gender = option ? option.value : null;
}, { immediate: true });

watch(selectedDeptIdLabel, (newValue) => {
  const option = deptIdOptions.find(option => option.label === newValue);
  ruleForm.value.deptId = option ? option.value : null;
}, { immediate: true });

watch(
  () => props.formData,
  (nVal) => {
    console.log(nVal, 'ruleFormruleFormruleForm');
    ruleForm.value = nVal;
    resetFormData = JSON.parse(JSON.stringify(nVal));
    console.log(resetFormData, 'resetFormData');
  },
  {
    immediate: true
  }
);

const resetFieldsData = () => {
  ruleForm.value = JSON.parse(JSON.stringify(resetFormData));
  selectedGenderLabel.value = genderOptions.find(option => option.value === resetFormData.gender)?.label || '';
  selectedDeptIdLabel.value = deptIdOptions.find(option => option.value === resetFormData.deptId)?.label || '';
};

const reset = () => {
  resetFieldsData();
  ruleFormRef.value?.clearValidate();
};

defineExpose({
  reset,
  resetFieldsData
});
</script>

<style lang="scss" scoped></style>